import React, { Component, PureComponent } from 'react'
import { Link } from "react-router-dom";
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import '@/css/Home.css';

import CardList2 from '@/comps/CardList2.js'
import scrollDown from '@/utils/scrollDown.js'

import Api from '@/config/api.js'


import { getPoint } from '@/utils/utils.js';
import ScrollDown from '@/utils/scrollDown.js';


class Home extends Component {
  constructor(props) {
    super(props)
    this.slideWidth = []
    this.slidePosition = []
    this.state = {
      catCur: 0,
      items: []
    }
  }
  async componentDidMount() {
    var data = await React.$axios.get(Api.publicSquareList + '?count=999')
    var arr = this.state.items
    arr.unshift(...data.data.list)
    this.setState({
      items: arr
    })
    this.catSlideSwitch(0)
    var a = new scrollDown(window)
    a.fn[0] = function () { console.log('======12', 12); }
  }

  componentDidUpdate() {
    //console.log('======componentDidUpdatexxCatCur',this.state.catCur);
    if (!this.slideWidth[0]) {
      //console.log('xxxxxxxcomponentDidUpdate');
      setTimeout(() => {
        this.catSlideSwitch(0)
      }, 0)
    }
  }
  componentWillUnmount() {
    console.log('首页卸载了!!!!!!!!!!!!!!!!!!!!!')
  }
  catSlideSwitch = (idx, event) => {
    //console.log('======catSlideSwitch');
    event && event.persist()
    this.setState({ catCur: idx }, () => {
      ;[...document.querySelectorAll('.cat-title-font')].map((v, k) => {
        this.slideWidth.splice(k, 1, v.offsetWidth)
        this.slidePosition.splice(k, 1, getPoint(v).l)
      })
      document.querySelector('#slide_span').style.width = this.slideWidth[idx] + 'px'
      document.querySelector('#slide_span').style.transform = 'translate(' + this.slidePosition[idx] + 'px,-100%)'
      if (event && event.type === 'click' && !document.querySelector('#slide_span').style.transition) {
        document.querySelector('#slide_span').style.transition = 'all .2s'
      }
    })
  }
  render() {
    let { items, catCur } = this.state
    var _domList = this.state.items.length > 0 ? (items.map(function (v, k) {
      return (
        // <CSSTransition key={k} timeout={500} classNames="item">
        //   <CardList2 key={v.id} discus={v.discus} />
        // </CSSTransition>
        <CardList2 key={v.id} dt={v} />
      )
    })) : null
    return (
      <div>
        <div className="cat-relative">
          <div className="yt yt-ae yt-pc cat-wrap">
            <div className={["cat-title", catCur === 0 ? "cat-title-cur" : ""].join(' ')} onClick={this.catSlideSwitch.bind(this, 0)}><span className="cat-title-font">广场</span></div>
            <div className={["cat-title", catCur === 1 ? "cat-title-cur" : ""].join(' ')} onClick={this.catSlideSwitch.bind(this, 1)}><span className="cat-title-font">我的</span></div>
          </div>
          <div className="slide-span" id="slide_span"></div>
        </div>
        <div className="search-ui"><i className="alifont font12">&#xe62a;</i>&nbsp;搜索</div>
        {_domList}
        {/* <Link to="/resetpassword">去resetpassword页面</Link> */}

      </div>
    )
  }
}
export default Home